<template>
  <div id="app">
    <Menu class="nav-wrapper" mode="horizontal" theme="primary" active-name="1">
      <MenuItem name="1">
        <Icon type="ios-paper" />
        内容管理
      </MenuItem>
      <MenuItem name="2">
        <Icon type="ios-people" />
        用户管理
      </MenuItem>
    </Menu>
    <div class="main-wrapper">
      <div class="menu">
        <div class="sub-menu">
          <div class="title">店铺管理</div>
          <div class="items">
            <div class="item">基础商品</div>
            <div class="item">店铺</div>
            <div class="item">服务</div>
            <div class="item">可配送区域</div>
          </div>
        </div>
        <div class="sub-menu">
          <div class="title">订单管理</div>
          <div class="items">
            <div class="item">订单</div>
            <div class="item">支付流水</div>
          </div>
        </div>
      </div>
      <div class="body-wrapper">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  #app {
    .nav-wrapper {}
    .main-wrapper {
      width: 1280px;
      height: calc(100vh - 60px);
      margin: 0 auto;
      display: flex;
      .menu {
        background-color: #f8f8f8;
        width: 200px;
        padding: 10px;
        .sub-menu {
          .title {
            font-weight: bold;
            line-height: 2.5;
          }
          .items {
            display: flex;
            flex-wrap: wrap;
            .item {
              width: 50%;
              line-height: 2;
            }
          }
        }
      }
      .body-wrapper {
        flex: 1;
      }
    }
  }
</style>
